<template>
	<view class="greyBox">
		<view class="u-flex u-row-between pick-up-select">
			<view class="u-flex" @click="shows.search = true">
				<view class="u-margin-right-8">筛选</view>
				<image src="@/static/img/icon_screen_supplier@2x.png"></image>
			</view>
		</view>
		<view class="carItemList" v-if="tableData.length>0">
			<view class="item" v-for="(item,index) in tableData" :key="index">
				<view class="contentBox">
					<view class="otherInfo">
						<view class="u-font-28 u-flex">
							<image src="@/static/img/pic_car.png"></image>
							<view class="u-margin-left-16">
								{{item.productInfo}}
							</view>
						</view>
						<view class="state green">
							{{ getStatusLabel(deliveryOfVehicleType, item.pickupStatus) }}
						</view>
					</view>
					<view class="orderInfo">
						<view class="info">
							<view class="name">提车申请号</view>
							<view class="rightBlock">{{item.id}}</view>
						</view>

						<view class="info">
							<view class="name">订单号</view>
							<view class="rightBlock">{{item.orderId}}</view>
						</view>
						<view class="info">
							<view class="name">申请车辆数</view>
							<view class="rightBlock sub">x{{item.productAmount}}</view>
						</view>
					</view>
					<view class="specialInfo green">
						<view class="name">交易订单金额</view>
						<view class="rightBlock num">¥ {{item.productAmount | thousands}}</view>
					</view>
				</view>
				<view class="bottom" v-if="item.pickupStatus !== 1">
					<u-button size="mini" shape="circle" :custom-style="buttonStyleMini" v-if="item.isRepaymentLoan"
						@clikc="handleRepayment(item)">贷款还款</u-button>
					<u-button size="mini" shape="circle" :custom-style="buttonStyleMini" v-if="item.pickupStatus === 0"
						@click="handleSubmitOpen(item)">确认</u-button>
					<u-button size="mini" shape="circle" :custom-style="buttonStyleMini" v-if="item.pickupStatus === 2"
						@click="handleDetails(item)">查看凭证</u-button>
				</view>
			</view>
		</view>
		<u-empty src="https://supply.zhongyimotor.com/upload/applet/maorder_kong_img@2x.png" icon-size="296"
			v-else margin-top="168" text="您目前还没有提车申请～"></u-empty>
		<c-confirm title="确认提车申请" content="是否确认买家的提车申请 ？" v-model="shows.buyingCar" @submit="handleSubmit" />
		<u-toast ref="uToast" />
		<u-no-network></u-no-network>
		
		<u-popup @close="shows.search = false" closeable v-model="shows.search" mode="bottom" border-radius="12">
			<view class="search-title">筛选</view>
			<view class="search-form">
				<u-form :model="querys" label-position="top">
					<u-form-item  label="订单号" :border-bottom="false">
						<u-search v-model="querys.id" height="72" :show-action="false"
							placeholder="请输入订单号"></u-search>
					</u-form-item>
					<u-form-item  label="车辆信息" :border-bottom="false">
						<u-search v-model="querys.productInfo" height="72" :show-action="false"
							placeholder="请输入车辆信息"></u-search>
					</u-form-item>
					<u-form-item  label="买家企业名称" :border-bottom="false">
						<u-search v-model="querys.buyerName" height="72" :show-action="false"
							placeholder="请输入买家企业名称"></u-search>
					</u-form-item>
					<u-form-item :border-bottom="false">
						<view class="u-flex">
							<u-button class="u-flex-1 u-margin-right-10" shape="circle"
								@click="handleReset">重置</u-button>
							<u-button type="success" :custom-style="{
							'background':'#0FBDF',
							'color':'#fff'
						}" class="u-flex-1" shape="circle" @click="handleSelect">确定</u-button>
						</view>
					</u-form-item>
				</u-form>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	import {
		getStatusLabel,
		deliveryOfVehicleType
	} from '@/utils/status.js'
	import {
		openFile
	} from '@/utils/index.js'
	import cConfirm from '@/components/c-confirm/index.vue'
	export default {
		components: {
			cConfirm
		},
		data() {
			return {
				buttonStyleMini: {
					color: "#303030",
					width: "152rpx",
					height: "52rpx",
					fontSize: "26rpx",
					marginLeft: "20rpx"
				},
				deliveryOfVehicleType,
				querys: {
					current: 1,
					size: 10
				},
				shows: {
					buyingCar: false,
					search: false
				},
				tableData: [],
				items: {}
			}
		},
		onShow() {
			this.handleSelect()
		},
		onReachBottom() {
			this.querys.current += 1;
			this.getTableList()
		},
		methods: {
			handleRepayment(item) {
				uni.navigateTo({
					url: '/pages/repayment/index?orderId=' + item.orderId
				})
			},
			handleDetails(item) {
				// 
				// uni.navigateTo({
				// 	url: '/pages/pickUpApply/details?id=' +item.id
				// })
				openFile(item.pickupProofUrl)
			},
			handleSubmit() {
				const params = {
					id: this.items.id
				}
				this.$api.setConfirmPickup(params).then(res => {
					this.handleSelect()
				})
			},
			handleSubmitOpen(item) {
				this.items = item
				this.$set(this.shows, 'buyingCar', true)
			},
			getTableList() {
				const params = JSON.parse(JSON.stringify(this.querys))
				const that = this
				uni.showLoading({
					title: '加载中...'
				});
				that.$api.getPickupPage(params).then(res => {
					if (params.current === 1) {
						that.tableData = res.result.records
					} else {
						that.tableData = [...that.tableData, ...res.result.records]
					}
					uni.hideLoading();
				})
			},
			handleSelect() {
				this.querys.current = 1
				this.getTableList()
				this.shows.search = false 
			},
			handleReset() {
				this.querys = {
					current: 1,
					size: 10
				}
				this.getTableList()
				this.shows.search = false
			},
			getStatusLabel
		}
	};
</script>

<style scoped lang="less">
	.search-title {
		margin-top: 30rpx;
		font-weight: bold;
		color: #202020;
		font-size: 16px;
		text-align: center;
	}
	
	.search-form {
		margin: 20px;
	
		/deep/ .u-icon-wrap {
			display: none !important;
		}
	}
	.pick-up-select {
		font-size: 13px;
		margin: 10px 15px 0 15px;
		image {
			width: 16px;
			height: 16px;
		}
	}
	.otherInfo {
		image {
			width: 16px;
			height: 16px;
		}
	}
</style>